<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布-雨伞</title>
</head>
<body onload="draw('myCanvas')" >

<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>


<script type="text/javascript">

    function draw(id) {
        var canvas=document.getElementById(id);
        if(canvas==null)
            return false;
        var ctx=canvas.getContext('2d');
        ctx.beginPath();

        // 小雨点
        ctx.moveTo(47,32);
        ctx.bezierCurveTo(40,42,38,56,46,60);
        ctx.bezierCurveTo(64,52,50,40,47,32);

        // 大雨点
        ctx.moveTo(78,32);
        ctx.bezierCurveTo(70,44,62,66,78,70);
        ctx.bezierCurveTo(104,60,80,40,78,32);

        // 伞身
        ctx.moveTo(44,118);
        ctx.bezierCurveTo(48,114,50,90,72,76);
        ctx.bezierCurveTo(82,82,104,70,102,54);
        ctx.bezierCurveTo(138,26,222,76,224,118);
        ctx.lineTo(146,118);
        ctx.lineTo(146,200);

        ctx.bezierCurveTo(147,212,162,216,162,192);
        ctx.bezierCurveTo(168,188,172,186,178,192);
        ctx.bezierCurveTo(180,200,182,218,162,231);
        ctx.bezierCurveTo(154,240,116,226,122,200);

        ctx.lineTo(122,118);
        ctx.lineTo(44,118);
        var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
        gradient.addColorStop(0,"rgba(244,28,285,0.1)");
        gradient.addColorStop(1,"rgba(255,255,255,1)");

        ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
        ctx.stroke();

        ctx.fillStyle=gradient;
        ctx.fill();
    }
</script>
</body>
</html>